<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  /*解决方案来自于CSS 2.1 中一个鲜为人知的属性，叫作table-layout。
它的默认值是auto，其行为模式被称作自动表格布局算法*/
  /*不过，它还接受另外一个值
fixed，这个值的行为要明显可控一些。它把更多的控制权交给了网页开
发者（没错，就是你），只把较少的控制权留给渲染引擎。我们设置的（宽
度）样式会直接起作用，而不仅仅被视为一种提示；同时，溢出行为（包括
text-overflow）与其他元素行为也是一样的，因此表格的内容将只能影响
表格行的高度了。
这种固定表格布局算法不仅更容易预测、便于使用，同时也明显更快。
因为表格的内容并不会影响单元格的宽度，所以在页面的下载过程中，表格
不需要频繁重绘。相信我们都对页面加载过程中表格不断重新调整列宽的恐
怖情景记忆犹新。对于固定表格布局来说，这种情况再也不会发生了。*/
  /*。请注意，为了确保这个技巧奏效，需要为这
些表格元素指定一个宽度（哪怕是100%）。同样，为了让text-overflow:
ellipsis 发挥作用，我们还需要为那一列指定宽度。*/
  /*即使我们为单元格指定了
宽度，也未必会得到对应
的结果。比如这个单元格
的宽度被指定为 1000px
而这个单元格的宽度被指定为 2000px。由于
外层容器所能提供的空间远远不足3000px，
这两个单元格的宽度会按比例缩小，分别得
到总宽度的 33.3% 和 66.6%*/
  /*如果我们禁
止文本折行
行为，那么
表格宽度可
能会远远超
出其容器的
宽度
而且 text-overflow: ellipsis 对此也无能为力，这一点很遗憾*/
  /*大图片或代
码块也可能
会导致同样
的问题*/
  /*table {
    table-layout: fixed;
    width: 100%;
  }*/
  /*对图7-5 中的表格应用了tablelayout:
fixed 之后的效果。按
从上到下的顺序总结为：如果不指
定任何宽度，则各列的宽度将是平
均分配的；后续的表格行并不会影
响列宽；给单元格指定很大的宽
度也会直接生效，并不会自动缩
小；overflow 和text-overflow
属性都是可以正常生效的；如果
overflow 的值是visible，则单
元格的内容有可能会溢出*/
  
  body {
    background: #ddd
  }
  
  section {
    width: 500px;
    margin: 2em;
    background: white;
  }
  
  table {
    border-collapse: collapse;
    margin-bottom: 1em;
    width: 100%;
  }
  
  section+section table {
    table-layout: fixed
  }
  
  td {
    border: 1px solid #aaa;
  }
  
  td.preformatted {
    white-space: pre;
    font-family: Consolas, Monaco, monospace;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>

<body>
  <section>
    <h1>With table-layout: auto</h1>
    <div>
      <table>
        <tbody>
          <tr>
            <td>If we don’t…</td>
            <td>specify a cell width, they will be assigned one that depends on their contents. Notice how the cell with the
              more content here is much wider.</td>
          </tr>
        </tbody>
      </table>

      <table>
        <tbody>
          <tr>
            <td>If we don’t…</td>
            <td>specify a cell width, they will be assigned one that depends on their contents. Notice how the cell with the
              more content here is much wider.</td>
          </tr>
          <tr>
            <td>All rows take part in calculating the widths, not just the first one.</td>
            <td>Notice how the dimensions here are different than the previous example.</td>
          </tr>
        </tbody>
      </table>

      <table>
        <tbody>
          <tr>
            <td style="width: 1000px">If we specify a width, it will not always be followed. I have a width of <code>1000px</code>…</td>
            <td style="width: 2000px">…and I have a width of <code>2000px</code>. Because there’s not enough space for <code>3000px</code>, they are
              reduced proportionally, to 33.3% and 66.6% of the total width.</td>
          </tr>
        </tbody>
      </table>

      <table>
        <tbody>
          <tr>
            <td>If we prevent word wrapping, the table can become so wide it grows beyond its container.</td>
            <td class="preformatted">…and <code>text-overflow: ellipsis</code> doesn’t help either.</td>
          </tr>
        </tbody>
      </table>

      <table>
        <tbody>
          <tr>
            <td>Large images and blocks of code can also cause the same issue.</td>
            <td><img src="http://lea.verou.me/book/panoramic.jpg"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>

  <section>
    <h1>With table-layout: fixed</h1>
    <div>
      <table>
        <tbody>
          <tr>
            <td>If we don’t…</td>
            <td>specify a cell width, they will be assigned one that depends on their contents. Notice how the cell with the
              more content here is much wider.</td>
          </tr>
        </tbody>
      </table>

      <table>
        <tbody>
          <tr>
            <td>If we don’t…</td>
            <td>specify a cell width, they will be assigned one that depends on their contents. Notice how the cell with the
              more content here is much wider.</td>
          </tr>
          <tr>
            <td>All rows take part in calculating the widths, not just the first one.</td>
            <td>Notice how the dimensions here are different than the previous example.</td>
          </tr>
        </tbody>
      </table>

      <table>
        <tbody>
          <tr>
            <td style="width: 1000px">If we specify a width, it will not always be followed. I have a width of <code>1000px</code>…</td>
            <td style="width: 2000px">…and I have a width of <code>2000px</code>. Because there’s not enough space for <code>3000px</code>, they are
              reduced proportionally, to 33.3% and 66.6% of the total width.</td>
          </tr>
        </tbody>
      </table>

      <table>
        <tbody>
          <tr>
            <td>If we prevent word wrapping, the table can become so wide it grows beyond its container.</td>
            <td class="preformatted">…and <code>text-overflow: ellipsis</code> doesn’t help either.</td>
          </tr>
        </tbody>
      </table>

      <table>
        <tbody>
          <tr>
            <td>Large images and blocks of code can also cause the same issue.</td>
            <td><img src="http://lea.verou.me/book/panoramic.jpg"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>
</body>

</html>